<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>商品列表</title>
</head>
<body>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
      href="${pageContext.request.contextPath}/static/css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
      href="${pageContext.request.contextPath}/static/css/bootstrap/css/default.css">
<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/static/css/carousel.css"
      rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/static/js/functions.js"></script>
<script src="${pageContext.request.contextPath}/static/js/cart.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/static/css/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function () {
        var goodsList = cart.getGoodsList();//获取购物车商品数据
        var s = "<h2><center>您还未选择商品呢，再去逛逛吧</center></h2>";
        if (goodsList != null && goodsList.length > 0) {
            var freight = "0.0" * 1;//运费
            $("#submitOrder").removeAttr("disabled");
            s = "<table class='table table-hover table-condensed '><thead><tr>"
                + "<th >#</th><th >商品图片</th><th >商品名称</th><th >商品单价</th><th >数量</th><th >小计</th></tr></thead><tbody>";
            for (var i = 0; i < goodsList.length; i++) {
                var goods = goodsList[i];
                freight += goods.postalfee * 1.0;
                s += "<input type='hidden' name='productVoList[" + i + "].product.pid' value='" + goods.id + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].size' value='" + goods.size.trim() + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].color' value='" + goods.color.trim() + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].product.name' value='" + goods.name + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].product.url' value='" + goods.pic + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].product.price' value='" + goods.price + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].product.offPrice' value='" + goods.discount + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].product.freight' value='" + goods.postalfee + "'/>";
                s += "<input type='hidden' name='productVoList[" + i + "].count' value='" + goods.num + "'/>";
                s += "<tr><td>" + (i + 1) + "</td>";
                s += "<td><img src='" + goods.pic
                    + "' width='30' height='30'></td>";
                s += "<td><a href='" +
                    "/product/getProductDetail?pid=" + goods.id
                    + "'>" + goods.name
                    + "</a>&nbsp;&nbsp;" + goods.size.trim() + "&nbsp;&nbsp;"
                    + goods.color.trim() + "</td>";
                s += "<td>原价<span class='glyphicon glyphicon-yen'></span>"
                    + goods.price
                    + "<br>现售<span class='glyphicon glyphicon-yen'></span>"
                    + goods.discount + "</td>";
                s += "<td>" + goods.num + "</td>";
                s += "<td><span class='glyphicon glyphicon-yen' ></span>"
                    + goods.num * goods.discount + "</td>";//小计
                s += "</tr>";
            }
            var total = (orderdetail.totalAmount * 1) + freight;
            $("#orderPostalfee").val(freight);
            $("#total").val(total);
            s += "</tbody></table>";
            s += "<table class='table table-condensed'>"
                + "<tr> <td class='text-right'>运费：<span class='glyphicon glyphicon-yen'></span>" + freight + "</td></tr>"
                + "<tr> <td class='text-right'>合计（含运费）：<span class='glyphicon glyphicon-yen'></span>" + total + " </td> </tr>"
                + " </table>";
        } else {
            $("#submitOrder").attr("disabled", "disabled");
        }
        $("#orderBody").html(s);

        //点击提交订单后 清空购物车
        $("#submitOrder").click(function () {
            clearCart();
        });
    });

    function handleAddressForm(addrId) {
        if (addrId) {
            $.post("${pageContext.request.contextPath}/address/getAddressById", {aid: addrId}, function (result) {
                if (checkLogin(result)) {
                    if (result) {
                        $("#addressAjaxFormModal").modal();
                        $("#addrProvince").val(result.province);
                        $("#addrCity").val(result.city);
                        $("#addrArea").val(result.area);
                        $("#addrContent").val(result.street);
                        $("#addrReceiver").val(result.receiver);
                        $("#addrTel").val(result.telephone);
                        $("#addrId").val(result.aid);
                    }
                    else {
                        $("#msgTitle").html("操作失败");
                        $("#msgBody").html("未读到当前地址信息");
                        $("#msgModal").modal();
                    }
                }
            }, "json");
        }
        else {
            $("#addressAjaxFormModal").modal();
        }
    }

    function handleAddress() {
        $("#addressAjaxFormModal").modal("hide");
        $.post("${pageContext.request.contextPath}/address/handleAddressAjax", {//参数
            aid: $("#addrId").val(),
            province: $("#addrProvince").val(),
            city: $("#addrCity").val(),
            area: $("#addrArea").val(),
            street: $("#addrContent").val(),
            receiver: $("#addrReceiver").val(),
            telephone: $("#addrTel").val()
        }, function (result) {//响应成功的回调函数
            if (checkLogin(result)) {
                if (result) {
                    location.reload();//刷新页面
//                    $("#myAddress").html(result);
//                    $("#submitOrder").removeAttr("disabled");
                } else {
                    $("#msgTitle").html("操作失败");
                    $("#msgBody").html("操作当前地址信息失败");
                    $("#msgModal").modal();
                }
            }
        });
    }

    function delAddress(addrId) {
        $.post("${pageContext.request.contextPath}/address/delAddressAjax", {aid: addrId}, function (result) {
            if (checkLogin(result)) {
                if (result) {
                    location.reload();
//                    $("#myAddress").html(result);
                }
                else {
                    $("#msgTitle").html("操作失败");
                    $("#msgBody").html("删除当前地址信息失败");
                    $("#msgModal").modal();
                }
            }
        }, "json");
    }

    function setDefault(addrId, e) {
        $.post("${pageContext.request.contextPath}/address/setDefaultAddress", {aid: addrId}, function (result) {
            if (checkLogin(result)) {
                if (result == "success") {
                    $(".isDefault").html("");
                    $(e.target).parent().siblings("[class='isDefault']").html("默认地址");
                }
                else {
                    $("#msgTitle").html("操作失败");
                    $("#msgBody").html("设置默认收货地址失败");
                    $("#msgModal").modal();
                }
            }
        }, "json");
    }

    function check() {
        return validateRadio("address", "请选择收货地址");
    }
</script>

<c:import url="../common/userTopNav.jsp"/>
<div class="container-fluid">
    <div class="row">
        <form action="${pageContext.request.contextPath}/order/makeOrder" method="post"
              <c:if test="${not empty _LOGIN_USER_}">onsubmit="check()" </c:if>
              <c:if test="${empty _LOGIN_USER_}">onsubmit="$('#loginFormModal').modal();"</c:if>>

            <div class="col-md-10 col-md-offset-1" id="myAddress">
                <h3>确认收货地址</h3>
                <c:if test="${not empty addressList}">
                    <table class="table table-condensed table-hover">
                        <tbody>
                        <c:forEach items="${addressList}" var="address">
                            <tr>
                                <td>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="address"
                                                   value="${address.pca2} ${address.addr.street} ${address.rp}"
                                                   <c:if test="${address.addr.type==1}">checked</c:if>>
                                        </label>
                                    </div>
                                </td>
                                <td>${address.pca2}</td>
                                <td>${address.addr.street}</td>
                                <td>${address.rp}</td>
                                <td class="isDefault">${address.addr.type==1?"默认地址":""}</td>
                                <td>
                                    <a href="#" onclick="handleAddressForm(${address.addr.aid})">修改</a> |
                                    <a href="#"
                                       onclick="if(confirm('确定要删除这个收货地址吗？')){delAddress(${address.addr.aid});}">删除</a> |
                                    <a href="#" onclick="setDefault(${address.addr.aid},event)">设为默认地址</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </c:if>
                <c:if test="${empty addressList}">
                    <h2>
                        <center>您还未添加收货地址呢</center>
                    </h2>
                </c:if>
                <button class="btn btn-primary" type="button" onclick="handleAddressForm()">添加收货地址</button>
            </div>

            <div class="col-md-10 col-md-offset-1">
                <h3>确认订单信息</h3>
                <div id="orderBody"></div>
                <div class="col-md-12 text-right">
                    <button id="submitOrder" class="btn btn-primary" type="submit">提交订单</button>
                </div>
            </div>
            <input type="hidden" id="orderPostalfee" name="totalFreight" value=""/>
            <input type="hidden" id="total" name="total" value=""/>
        </form>
    </div>
</div>

<div class="modal fade" id="addressAjaxFormModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title" id="myModalLabel">添加/修改收货地址</h4>
            </div>
            <div class="modal-body">

                <input type="hidden" id="addrId" name="addrId" value="0"/>
                <div class="form-group">
                    <label for="addrProvince"> 省 </label>
                    <input class="form-control" name="addrProvince" id="addrProvince"
                           placeholder="省" required/>
                </div>
                <div class="form-group">
                    <label for="addrCity"> 市</label>
                    <input class="form-control" name="addrCity" id="addrCity" placeholder="市"
                           required/>
                </div>
                <div class="form-group">
                    <label for="addrArea"> 区 </label>
                    <input class="form-control" name="addrArea" id="addrArea" placeholder="区"
                           required/>
                </div>
                <div class="form-group">
                    <label for="addrContent"> 街道</label>
                    <input class="form-control" name="addrContent" id="addrContent" placeholder="街道"
                           required/>
                </div>
                <div class="form-group">
                    <label for="addrReceiver"> 收件人 </label>
                    <input class="form-control" name="addrReceiver" id="addrReceiver"
                           placeholder="收件人" required/>
                </div>
                <div class="form-group">
                    <label for="addrTel"> 联系电话</label>
                    <input class="form-control" name="addrTel" id="addrTel" placeholder="联系电话"
                           required/>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" onclick="handleAddress()">确定</button>
                <button class="btn btn-default" type="button" data-dismiss="modal">关闭窗口</button>
            </div>
        </div>
    </div>
</div>
<c:import url="../common/userFooter.jsp"/>
</body>
</html>